import { Vue, Component, Watch } from 'vue-property-decorator'

@Component({
    name: 'verifySwipe',
    props: {
        //失败之后的函数
        value: {
            type: Boolean
        },
        userPhone: {
            type: String,
            default: '1'
        }
    }
})
export default class verifySwipe extends Vue {
    private disX = 0
    private text = "请拖住滑块，拖动到最右边"

    private rangeStatus = false
    private isMove = false
    private isAnimate = false
    @Watch('rangeStatus')
    onrangeStatus(v: boolean) {
        this.$emit('input', v)
    }
    rangeMove(e: any) {
        if (!this.rangeStatus) { this.isMove = true }
        this.rangeMoveIpad(e)
    }
    //滑块移动
    rangeMoveIpad(e: any) {
        let ele = e.target;
        let startX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
        let eleWidth = ele.offsetWidth;
        let parentWidth = ele.parentElement.offsetWidth;
        let MaxX = parentWidth - eleWidth;
        if (this.rangeStatus) {//不运行
            return false;
        }
        document.ontouchmove = document.onmousemove = (e: any) => {
            if (!this.isMove) return
            let endX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
            this.disX = endX - startX;
            if (this.disX <= 0) {
                this.disX = 0;
            }
            //if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好
          if (this.disX >= MaxX ) {//减去滑块的宽度,体验效果更好
                this.disX = MaxX;
            }
            if (this.disX > 0) {
                this.disX = this.disX
            }

            ele.style.transform = 'translateX(' + (this.disX) + 'px)';
            //  e.preventDefault();
        }
        document.ontouchend = document.onmouseup = () => {
            this.isMove = false

            this.text = '请拖住滑块，拖动到最右边'
            this.isAnimate = true
            if (this.disX !== MaxX) {
                //未拖到底
                ele.style.transform = 'translateX(0)';
                setTimeout(() => {
                    this.isAnimate = false
                }, 100)
                this.disX = 0


            } else {

                this.rangeStatus = true;
                this.text = "验证通过"

            }
            document.ontouchmove = document.onmouseover = null;
            document.ontouchend = document.onmouseup = null;
        }
    }

}